import React, { Component } from 'react';

import "../styles/MyTabbar.scss"

class MyTabbar extends Component {

    constructor(props) {
        super(props);
        this.state = { //state中保存的值就是组件的状态
            currentIndex: 0, //用来保存当前点击按钮的下标
            list: [
                { icon: 'icon-shouye', text: '店铺' },
                { icon: 'icon-fenlei', text: '分类' },
                { icon: 'icon-diejia', text: '全部商品' },
                { icon: 'icon-gouwuche', text: '购物车' },
                { icon: 'icon-wode', text: '个人中心' },
            ]
        }
    }

    handleClick(index) {
        //更新下标currentIndex
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='Tabbar'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className={"item " + (this.state.currentIndex == index ? "active" : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                <span className={'iconfont ' + item.icon}></span>
                                <div className="text">{item.text}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default MyTabbar;